import React, { useRef, useState, useMemo, useEffect } from 'react'
import '../../../node_modules/font-awesome/css/font-awesome.min.css'
import './Detail.scss'
import { Button, Modal, message, Space, notification } from 'antd';
import Analysis from './components/Analysis';
import Comment from './components/Comment';
import Intorduce from './components/Intorduce';
import { useSearchParams } from 'react-router-dom';
import rang from '../../apis/modules/rang'
import { useSelector, useDispatch } from 'react-redux';
import { randerRangeData } from '../../store/modules/range'
//头部


export default function Detial() {
  const [count, setCount] = useState(0)
  const [count1, setCount1] = useState(true)
  const [hidden, setHidden] = useState(true)
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [api, contextHolder] = notification.useNotification();
  const [parms, setParms] = useSearchParams()
  const dispatch = useDispatch()
  const { data } = useSelector((state) => {
    return state.range
  })
  let id = parms.get('tid')

  const boxRef = useRef()
  useEffect(() => {
    // dispatch(randerRangeData(id))
    
  }, [])
  // 接口
  // async function findById(id) {
  //   console.log(id);
  //   let res = await rang.findRangById(id)
  //   console.log(res.data.data);
  // }
  // 样式切换
  function addClass(id) {

    setCount(id)
  }
  function collection() {
    // rang.findAllCollect(data.uid)
    // if (count1) {
    //   setCount1(!count1)
    //   rang.addCollect(data.uid, data.tid)
    // }else{
    //   setCount1(!count1)
    //   rang.delCollect(data.uid,data.tid)
    // }

  }
  // tab栏切换
  function TabCheek() {
    switch (count) {
      case 0:
        return <Intorduce></Intorduce>
      case 1:
        return <Comment list={data.list} />
      case 2:
        return <Analysis />

    }
  }


  //  模态框
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = (type) => {
    setIsModalOpen(false);
    setHidden(true)
    boxRef.current.style.top = '23.18vw'
    api[type]({
      message: 'FLAG正确',
      style: {
        width: '7.55rem',
        height: '1rem',
        background: '#F6FFED',
        borderRadius: '0.1rem',
        border: '1px solid #D9F7BE',

      }

    });

  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };

  // 启动按钮


  const openNotificationWithIcon = (type) => {
    setHidden(false)
    boxRef.current.style.top = '27.78vw'
    api[type]({
      message: '启动成功',
      style: {
        width: '7.55rem',
        height: '1rem',
        background: '#F6FFED',
        borderRadius: '0.1rem',
        border: '1px solid #D9F7BE',

      }

    });
  };
  // 渲染难度
  function differt() {
    if (data.diffculty?.did == 1) {
      return <>
        <i className='fa fa-star star1'></i>
        <i className='fa fa-star-o star'></i>
        <i className='fa fa-star-o star'></i>
        <i className='fa fa-star-o star'></i>
        <i className='fa fa-star-o star'></i>
      </>
    } else if (data.diffculty?.did == 2) {
      return <>
        <i className='fa fa-star star1'></i>
        <i className='fa fa-star star1'></i>
        <i className='fa fa-star-o star'></i>
        <i className='fa fa-star-o star'></i>
        <i className='fa fa-star-o star'></i>
      </>
    } else {
      return <>
        <i className='fa fa-star star1'></i>
        <i className='fa fa-star star1'></i>
        <i className='fa fa-star star1'></i>
        <i className='fa fa-star-o star'></i>
        <i className='fa fa-star-o star'></i>
      </>
    }
  }
  return (
    // <div className='detial'>
    //   <div className='nav'>当前位置：安全实验 安全验证 漏斗靶场实</div>
    //   <div className="titleBox">
    //     <div className="img">

    //     </div>
    //     <div className="titile-msg">
    //       <h1>漏洞靶场实战-本地文件包含</h1>
    //       <h2>本地文件包含漏洞练习</h2>
    //       <p>学习人数: <span>317</span>标签：<span>本地文件夹包含</span>  </p>
    //       <button>难度：初级</button>
    //     </div>
    //   </div>
    // </div>

    <div className="page flex-col">
      <div className="container">
        <div className="section_11 flex-col">
          <div className="text-wrapper_22 flex-row">
            <span className="text_9">
              当前位置：安全实验&nbsp;&nbsp;&nbsp;安全验证&nbsp;&nbsp;&nbsp;漏斗靶场实战-本地文件包含
            </span>
          </div>
          <div className="group_15 flex-row justify-between">
            <div className="group_1 flex-col">
              <div className="text-wrapper_23 flex-row justify-between">
                <span className="text_10">{data.tname}</span>
                <span className="text_11">免费</span>
              </div>
              <div className="text-wrapper_24 flex-row justify-between">
                <span className="text_12">简介:</span>
                <span className="text_13">{data.note}</span>
              </div>
              <div className="group_16 flex-row">
                <div className="text-wrapper_4 flex-col">
                  <span className="text_14">本地文件夹包含</span>
                </div>
              </div>
              <div className="group_17 flex-row">
                <span className="text_15">难易程度:</span>
                {
                  differt()
                }
                <div className={hidden ? "group_2 flex-row justify-between" : "group_2 flex-row justify-between hidden"}>
                  {contextHolder}
                  <Button className='text_16' type="primary" danger onClick={() => openNotificationWithIcon('success')}>
                    启动环境
                  </Button>

                </div>
                <div className={!hidden ? "btn" : "btn hidden"}>
                  <Button className='text_16' type="primary" danger onClick={showModal}>
                    提交flag
                  </Button>
                  <Modal title="提交当前靶场FLAG"
                    open={isModalOpen}
                    onCancel={handleCancel}
                    onOk={handleOk}
                    footer={null}
                    centered={true}
                  >

                    <div style={{ textAlign: 'right' }}>
                      <div style={{ width: '100%', height: '0.6rem', marginBottom: '0.25rem' }}>
                        <input type="text" placeholder='请输入以字母开头的32位FLAG' style={{ width: '100%', height: '0.6rem' }} />

                      </div>
                      <div style={{ color: 'red', textAlign: 'left', display: 'none' }}>
                        请输入正确的FLAG
                      </div>
                      {contextHolder}
                      <Button onClick={() => handleOk('success')} type="primary" style={{ marginRight: '0.25rem', backgroundColor: '#FC682E' }}>
                        确定
                      </Button>
                      <Button onClick={handleCancel} style={{ backgroundColor: '#7C7C7C', color: 'white' }}>
                        取消
                      </Button>
                    </div>
                  </Modal>
                  <Button className='fail' type="primary" danger>
                    放弃练习
                  </Button>
                </div>
              </div>
            </div>

          </div>
          {/* ip地址显示 */}
          <div className={!hidden ? "ipConfig" : "ipConfig hidden"}>

            IP地址: <span>219.153.229.128</span>
            端口: <span>42359</span>
            协议: <span>http</span>

            <div className='toFast'>立即访问  &gt;</div>
          </div>
          <div className="group_18 flex-row">
            <div className="box_14 flex-row">
              <span className="text_39">完成人数：</span>
              <span className="text_40">3217</span>
              <span className="text_41">放弃人数：</span>
              <span className="text_42">2056</span>
              <div className={!count1 ? "image-text_17 flex-row justify-between active1" : "image-text_17 flex-row justify-between"}
                onClick={collection}>

                <i className='fa fa-star label_6 ' ></i>
                <span className="text-group_7">收藏</span>
              </div>
              <div className="image-text_18 flex-row justify-between">

                <i className='fa fa-thumbs-o-down fa-flip-horizontal image_16'></i>
                <span className="text-group_8">差评</span>
              </div>
            </div>

          </div>
          <div className="group_19 flex-row">
            <div className="group_3 flex-row">
              <div className={count == 0 ? "text-wrapper_5 flex-col active" : "text-wrapper_5 flex-col"} onClick={() => addClass(0)}>
                靶场介绍
              </div>
              <div className={count == 1 ? "text-wrapper_5 flex-col active" : "text-wrapper_5 flex-col"} onClick={() => addClass(1)}>
                靶场评论
              </div>
              <div className={count == 2 ? "text-wrapper_5 flex-col active" : "text-wrapper_5 flex-col"} onClick={() => addClass(2)}>
                过程解析
              </div>

              {/* <span className="text_18">靶场介绍</span>
              
             
                <span className="text_18">靶场介绍</span> */}

              {/* <span className="text_18">靶场介绍</span>
              <span className="text_18">靶场评论</span>
              <span className="text_19">过程解析</span> */}
            </div>


          </div>

          <div className="section_5 flex-col" ref={boxRef}>
            {TabCheek()}


          </div>
          <img
            className="thumbnail_2"
            src={
              "https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng43534b772cb38497c6906602e0692b6c6384aed8cde3b356e44f11bec8537dae"
            }
          />
          <img
            className="thumbnail_3"
            src={
              "https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng43534b772cb38497c6906602e0692b6c6384aed8cde3b356e44f11bec8537dae"
            }
          />
          <div className="section_8 flex-col" />
        </div>
        {/* 右侧排行榜 */}
        <div className="ranking">
          <div className="garde-box">
            <span className="garde">得分榜</span>
          </div>
          <div className="people">
            <div className="left">
              <img src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng25a909c683d3f0e839e820ad49d21f6bd25f2e9a7fcdbe7c20e302cdfdaca313" alt="" />
            </div>
            <div className="center">
              小蜗牛woniu
            </div>
            <div className="right">
              <span className='right-grade'>19709</span>
              分
            </div>
          </div>
          <div className="people">
            <div className="left">
              <img src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng25a909c683d3f0e839e820ad49d21f6bd25f2e9a7fcdbe7c20e302cdfdaca313" alt="" />
            </div>
            <div className="center">
              小蜗牛woniu
            </div>
            <div className="right">
              <span className='right-grade'>19709</span>
              分
            </div>
          </div>
          <div className="people">
            <div className="left">
              <img src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng25a909c683d3f0e839e820ad49d21f6bd25f2e9a7fcdbe7c20e302cdfdaca313" alt="" />
            </div>
            <div className="center">
              小蜗牛woniu
            </div>
            <div className="right">
              <span className='right-grade'>19709</span>
              分
            </div>
          </div>
          <div className="people">
            <div className="left">
              <img src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng25a909c683d3f0e839e820ad49d21f6bd25f2e9a7fcdbe7c20e302cdfdaca313" alt="" />
            </div>
            <div className="center">
              小蜗牛woniu
            </div>
            <div className="right">
              <span className='right-grade'>19709</span>
              分
            </div>
          </div>
          <div className="people">
            <div className="left">
              <img src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng25a909c683d3f0e839e820ad49d21f6bd25f2e9a7fcdbe7c20e302cdfdaca313" alt="" />
            </div>
            <div className="center">
              小蜗牛woniu
            </div>
            <div className="right">
              <span className='right-grade'>19709</span>
              分
            </div>
          </div>

        </div>
      </div>

    </div>
  )
}
